<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue学习</title>
    <script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/bk-magic-vue.min.css">
    <style>
        [v-cloak] {
            display: none;
        }

        .box {
            margin-left: 20px;
        }

        .bk-form {
            margin-top: 20px;
        }
    </style>
</head>
<body>
{% verbatim %}
<div id="app" v-cloak>
    <div class="box">
        <bk-form form-type="inline">
            <bk-form-item label="">
                <bk-input placeholder="请输入" v-model="keyword"></bk-input>
            </bk-form-item>
            <bk-form-item>
                <bk-button ext-cls="mr5" theme="primary" title="提交" @click="clearSearch" :disabled="isBan">清空
                </bk-button>
            </bk-form-item>
        </bk-form>
        <div class="mt10" style="width: 600px">
            <bk-table
                    :data="users"
                    :size="'small'"
            >
                <bk-table-column type="index" label="序列" width="60"></bk-table-column>
                <bk-table-column label="名字" prop="name"></bk-table-column>
                <bk-table-column label="邮箱" prop="email"></bk-table-column>
                <bk-table-column label="日期" prop="time"></bk-table-column>

            </bk-table>
        </div>

    </div>
</div>
{% endverbatim %}

</body>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/js/jquery-1.10.2.min.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/assets/bootstrap-3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.22/vue.js"></script>
<script src="https://magicbox.bk.tencent.com/static_api/v3/components_vue/2.0/bk-magic-vue.min.js"></script>
<script>
    new Vue(
        {
            el: "#app",
            data() {
                return {
                    isBan: true,
                    keyword: '',
                    users_: [],
                    users: [
                        {
                            name: "王大虎",
                            email: "1234569@qq.com",
                            time: "2022-04-25"
                        },
                        {
                            name: "孙小兔",
                            email: "1234567@qq.com",
                            time: "2022-04-24"
                        },
                        {
                            name: "赵大鼠",
                            email: "1234568@qq.com",
                            time: "2022-04-23"
                        },
                        {
                            name: "李小喵",
                            email: "1234560@qq.com",
                            time: "2022-04-22"
                        }
                    ]
                }
            },
            created() {
                this.copyUsers();
            },
            methods: {
                clearSearch() {
                    this.keyword = ""
                },

                copyUsers_() {
                    for (let i = 0; i < this.users_.length; i++) {
                        this.users.push(this.users_[i])
                    }
                },

                copyUsers() {
                    let self = this;
                    this.users.forEach(function (val, key) {
                        self.users_.push(val);
                    });
                },
            },

            watch: {
                keyword(val, oldval) {
                    this.users.length = 0;
                    if (val) {
                        this.isBan = false;
                        for (let i = 0; i < this.users_.length; i++) {
                            if (this.users_[i].name.search(val) !== -1) {
                                this.users.push(this.users_[i])
                            }
                        }
                    } else {
                        this.isBan = true;
                        this.copyUsers_()
                    }

                }
            }
        }
    )
</script>
</html>